
<div class="container" ng-app="usersApp">    
    <!-- <div class="row" >
        <div class="blockGray">
            <ul class="nav nav-pills " ng-controller="indexController">
                <li data-ng-class="{'active':getCurrentRouteClass('/Storer')}"><a href="#!/Storer">Almacenistas</a></li>
                <li data-ng-class="{'active':getCurrentRouteClass('/Driver')}"><a href="#!/Driver">Conductores</a></li>
            </ul>
        </div>            
    </div>-->
    <div class="row" >
        <div class="blockGray">
            <div class="blockInner">
                <ng-view></ng-view>
            </div>
        </div>        
    </div>    
   
    <!--  Definición de vistas parciales -->
    <script type="text/ng-template" id="index.html">
        <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
        <progressbar class="progress-striped active" value="100" type="info" ng-show="loading"></progressbar>
            <div class="toolbar">
                <div class="col-md-7">
                    &nbsp;
                </div>
                <div class="col-md-5 ">
                    <div class="pull-right">
                        <div class="btn-toolbar" role="toolbar">
                            <div class="btn-group  btn-group-sm">
                                <button class="btn btn-default" ng-click="go('/'+basePath)"><span class="glyphicon glyphicon-home"></span> Inicio</button>
                                <button class="btn btn-default" ng-click="go(currentPath+'/edit/0')"><span class="glyphicon glyphicon-plus-sign"></span> Nuevo</button>
                                <button class="btn btn-default" ng-click="goEdit(currentPath+'/edit/'+userId)"><span class="glyphicon glyphicon-edit"></span> Editar</button>
                                <button class="btn btn-default" ng-click="delete(userId)"><span class="glyphicon glyphicon-remove"></span> Eliminar</button>
                                <button class="btn btn-default" ng-click="refresh()"><span class="glyphicon glyphicon-refresh"></span> Actualizar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
        <br>
        <ng-jqgrid vapi="grid.apicall" config="grid.config" api="grid.api" gridid="grdUsers01" pagerid="pager01"></ng-jqgrid>
    </script>
    
    <script type="text/ng-template" id="edit.html"> 
    <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
    <progressbar class="progress-striped active" value="100" type="info" ng-show="loading"></progressbar>
    <div class="toolbar">
        <div class="col-md-7">
            &nbsp;
        </div>
        <div class="col-md-5 ">
            <div class="pull-right">
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group  btn-group-sm">
                        <a href="#!/{{basePath}}" class="btn btn-default" role="button"><span class="glyphicon glyphicon-home"></span> Inicio</a>
                        <button class="btn btn-default" ng-click="save()" ng-disabled="frmUser.$invalid"><span class="glyphicon glyphicon-floppy-save"></span> Guardar</button>
                        <button class="btn btn-default" ng-click="go(basePath+'/edit/0')"><span class="glyphicon glyphicon-plus-sign"></span>Nuevo</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="panel panel-default">
        <div class="panel-heading">Administración de Usuarios</div>

        <div class="panel-body">
            <form role="form" novalidate name="frmUser">
                <div class="row">
                    <div class="col-md-6">
                        <input type="hidden" class="form-control" ng-model="user.id">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmUser.code)">
                            <label for="code">Clave</label>
                            <input type="text" class="form-control" id="code" name="code" placeholder="Clave de usuario" required  ng-model="user.code">
                        </div>

                    </div>
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmUser.first_name)">
                            <label for="first_name">Nombre</label>
                            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="Nombre de usuario" required ng-model="user.first_name">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmUser.last_name)">
                            <label for="last_name">Apellidos</label>
                            <input type="text" class="form-control" id="apellidos" name="last_name" placeholder="Apellidos del usuario" required ng-model="user.last_name">
                        </div>

                    </div>
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmUser.username)">
                            <label for="username">Id de Usuario</label>
                            <input type="text" class="form-control" id="username" name="username" placeholder="Id de usuario" required ng-model="user.username">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmUser.password)">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="Introduce el password" required ng-model="user.password">
                        </div>

                    </div>
                    <div class="col-md-6">
                        <!-- <div class="form-group">
                            <label for="repassword">Confirma el password</label>
                            <input type="password" class="form-control" id="repassword" name="repassword" placeholder="Confirma el password" ng-model="repassword">
                        </div> -->
                        <div class="form-group" ng-class="getFormFieldCssClass(frmUser.type)">
                            <label for="type">Tipo de usuario</label>
                            <select ng-disabled="userType" id="type" name="type" class="form-control" ng-model="user.type"
                                    ng-options="opt.id as opt.tipo for opt in userTypes">
                                    <option value="">Selecciona un tipo de usuario</option>
                            </select>                            
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" ng-class="getFormFieldCssClass(frmUser.status)">
                            <label for="status">Estatus</label>
                            <select id="status" name="status" class="form-control" required ng-model="user.status"
                                    ng-options="opt.id as opt.status for opt in userStatus">
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        
                    </div>
                </div>
            </form>        
        </div>
    </div>
    </script>
    
    <script type="text/ng-template" id="modal.html">
        <!-- <div class="modal-header">
            <h3>{{modalOptions.headerText}}</h3>
        </div>-->
        <div class="modal-body">
            <br/>
            <p>{{modalOptions.bodyText}}</p>
            <br/>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" 
                    data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
            <button type="button" class="btn btn-primary" 
                    data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
        </div>
    </script>
     
    
    <script type="text/ng-template" id="modalInfo.html">
        <!--<div class="modal-header">
            <h3>{{modalOptions.headerText}}</h3>
        </div>-->
        <div class="modal-body">
            <br/>
            <p>{{modalOptions.bodyText}}</p>
            
        </div>
        <div class="modal-footer">           
            <button type="button" class="btn btn-primary" 
                    data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
        </div>
    </script>
    
</div>